<template>
	<view class="tui-searchbar__box"
		:style="{ backgroundColor: backgroundColor, padding: padding, borderRadius: padding == '0' ? radius : '0' }">
		<view class="tui-search-bar__form" @click="handleClick">
			<view class="tui-search-bar__box"
				:style="{ height: height, borderRadius: radius, backgroundColor: inputBgColor }">
				<tui-icon class="tui-icon-search" name="search" :size="18" unit="px"/>
				<input type="text" class="tui-search-bar__input" :placeholder="placeholder" :value="valueTxt"
					:focus="focus" :disabled="disabled" confirm-type="search" @blur="inputBlur" @focus="inputFocus"
					:adjust-position="false" @input="inputChange" @confirm="search" />
				<icon type="clear" :size="15" class="tui-icon-clear" v-if="valueTxt.length > 0 && !disabled"
					@tap.stop="clearInput"></icon>
			</view>
		</view>
		<view v-if="showCancel" class="tui-search-bar__cancel-btn"
			:style="{ color: cancelColor, fontSize: cancelSize }" @tap="hideInput">{{ cancelText }}</view>
		<view v-if="valueTxt && !disabled && !showCancel && showSearch" class="tui-search-bar__cancel-btn"
			:style="{ color: searchColor, fontSize: cancelSize }" @tap="search">{{ searchText }}</view>
	</view>
</template>

<script>
	//默认高度52px
	export default {
		name: 'tuiSearchbar',
		emits: ['clear', 'focus', 'blur', 'click', 'cancel', 'input', 'search'],
		props: {
			//搜索栏背景色
			backgroundColor: {
				type: String,
				default: '#ededed'
			},
			//搜索栏padding
			padding: {
				type: String,
				default: '8px 10px'
			},
			//input框高度
			height: {
				type: String,
				default: '36px'
			},
			radius: {
				type: String,
				default: '4px'
			},
			//input框背景色
			inputBgColor: {
				type: String,
				default: '#fff'
			},
			focus: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请输入搜索关键词'
			},
			value: {
				type: String,
				default: ''
			},
			//input是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelColor: {
				type: String,
				default: '#888'
			},
			focus: {
				type: Boolean,
				default: false
			},
			cancelSize: {
				type: String,
				default: '16px'
			},
			searchText: {
				type: String,
				default: '搜索'
			},
			searchColor: {
				type: String,
				default: '#5677fc'
			},
			showCancel: {
				type: Boolean,
				default: false
			},
			showSearch: {
				type: Boolean,
				default: true
			}
		},
		created() {
			this.valueTxt = this.value;
		},
		watch: {
			value(val) {
				this.valueTxt = val;
			}
		},
		data() {
			return {
				valueTxt: ''
			};
		},
		methods: {
			handleClick() {
				this.$emit('click');
			},
			clearInput() {
				this.valueTxt = '';
				// #ifdef MP-TOUTIAO || MP-WEIXIN
				uni.hideKeyboard();
				// #endif
				// #ifndef MP-TOUTIAO || MP-WEIXIN
				this.isFocus = true;
				// #endif
				this.$emit('clear');
			},
			inputFocus(e) {
				this.$emit('focus', e.detail);
			},
			inputBlur(e) {
				this.$emit('blur', e.detail);
			},
			hideInput() {
				uni.hideKeyboard();
				this.$emit('cancel', {});
			},
			inputChange(e) {
				this.valueTxt = e.detail.value;
				this.$emit('input', e.detail);
			},
			search() {
				this.$emit('search', {
					value: this.valueTxt
				});
			}
		}
	};
</script>

<style scoped>
	.tui-searchbar__box {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.tui-search-bar__form {
		position: relative;
		-webkit-box-flex: 1;
		-webkit-flex: auto;
		flex: auto;
	}

	.tui-search-bar__box {
		width: 100%;
		padding-left: 10px;
		padding-right: 8px;
		box-sizing: border-box;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.tui-search-bar__box .tui-search-bar__input {
		padding: 0 8px;
		width: 100%;
		border: 0;
		font-size: 14px;
		box-sizing: content-box;
		background: transparent;
	}

	.tui-search-bar__box .tui-search-bar__input:focus {
		outline: none;
	}

	.tui-search-bar__box .tui-icon-search {
		flex-shrink: 0;
	}

	.tui-search-bar__box .tui-icon-clear {
		margin-left: 2px;
		flex-shrink: 0;
	}

	.tui-search-bar__cancel-btn {
		font-size: 15px;
		margin-left: 13px;
		line-height: 15px;
		white-space: nowrap;
		flex-shrink: 0;
	}
</style>
